<template>
    <!-- 公开数量 -->
    <div class="count-box">
        <button class="count-remove" @click="decreaseHandler" :disabled="props.count === 1"> - </button>
        <span class="count">{{ props.count }}</span>
        <button class="count-add" @click="increaseHandler"> + </button>
    </div>
</template>
<script setup lang="ts">
const props = defineProps<{ count: number }>()
const emit = defineEmits<{
    (event: 'decrease'): void,
    (event: 'increase'): void,
    (event: 'update:count', count: number): void
}>()
const decreaseHandler = () => {
    emit('decrease')
    emit('update:count', props.count - 1)


}
const increaseHandler = () => {
    emit('increase')
    emit('update:count', props.count + 1)
}



</script>
<style lang="stylus" scoped>
.count-box
    width 82px
    display flex
.count
    text-align center
    width: 30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
    border-top-width: 1px;
    border-top-style: solid;

button
    font-size 17px
    width 24px
    background-color rgba(0,0,0,0)
    border 1px solid rgba(0, 0, 0, 0.15);
    border-radius 10px

.count-remove
    border-top-right-radius 0
    border-bottom-right-radius 0

.count-add
    border-top-left-radius 0
    border-bottom-left-radius 0
    
</style>